<template lang="pug">
.bwt-search
  .bwt-search-button
    slot(name="button")
  .bwt-search-form
    bwt-form(
      ref="form"
      :model="props.modelValue"
      :items="getItems"
      :inline="true"
    )
</template>

<script setup name="BwtSearch" lang="jsx">
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {}
  },
  items: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits();

const getItems = computed(() => {
  return [
    ...props.items,
    {
      key: 'search',
      render(h, { value, input }) {
        return (
          <div>
            <el-button type="primary" onClick={() => search()}>
              查询
            </el-button>
            {/* <el-button size='small' round icon='el-icon-refresh-right' onClick={() => that.clear()}>
              重置
            </el-button> */}
          </div>
        )
      }
    }
  ]
})

function search() {
  emit("search");
}
function clear() {
  emit("clear");
}
</script>
<style lang="scss">
.bwt-search {
  display: flex;
  justify-content: space-between;
  margin: 16px 12px 0 12px;
  .el-form--inline .el-form-item {
    margin-right: 0;
    margin-left: 10px;
  }
  &-form {
    display: flex;
    align-items:flex-start;
    .el-form-item__content {
      width: 120px;
    }
  }
}
</style>
